<template>
  <div class="june">
    <div class="june-banner">
      <img :src="require('./banner.png')" alt="6月红包雨，好礼伴你行。">
    </div>
    <div class="june-content">
      <div class="june-content-items">
        <img :src="require('./items.png')" alt="6月红包雨，好礼伴你行。">
      </div>

      <div class="june-content-title">
        <img :src="require('./title.png')" alt="活动规则">
      </div>
      <div class="june-content-info">
        <div class="june-content-info-inner">
          <p>1. 派发的红包用于投资返现使用，投资完后红包相应金额直接返入账户；</p>
          <p>2. 红包有效期内，单笔投资额满足相应条件可使用，新手标不可用；</p>
          <p>3. 红包有效期为15天，过期无效；</p>
          <p>4. 活动二仅限老用户参与，投资标的类型不限；</p>
          <p>5. 活动二可多次参与，限单笔复投5万，多投多得；</p>
          <p>6. 活动二截止日期6月17日17:00；</p>
          <p>7. 京东购物卡直接通过短信形式发送，届时会有工作人员进行联系；</p>
          <p>8. 如有疑问，请拨打客服热线：400-608-2001或关注微信：分秒金融服务号（fenmiaojinrong）与我们联系；</p>
          <p>9. 本活动最终解释权归分秒金融所有。</p>
        </div>
      </div>
      <div class="june-btn" @click="toInvest">
        <img src="./btn.png" alt="立即出借">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    methods: {
      toInvest () {
        // 原生到投资列表
        if (this.$route.query['type'] && this.$route.query['type'] !== '') {
          window.location.href = 'nativejs://' + '{"viewNum":"3"}'
          return
        }
        this.$router.push('/invest')
      }
    },
    created () {
      this.w = document.documentElement.clientWidth
      this.h = this.w * (2384 / 750)
    }
  }
</script>

<style lang='scss'>
  .june {
    &-banner {
      width: 100%;
      height: 360px;
      img {
        width: 100%;
        height: 360px;
      }
    }
    &-content {
      padding-top: 44px;
      padding-bottom: 119px;
      background: url('./bg.png') 0 0 no-repeat;
      background-size: cover;
      &-items {
        img {
          width: 100%;
          height: 1034px;
        }
      }
      &-title {
        text-align: center;
        margin-top: 34px;
        img {
          width: 300px;
          height: 89px;
        }
      }
      &-info {
        width: 100%;
        height: 702px;
        background: url('./info_bg.png') 0 0 no-repeat;
        background-size: cover;
        margin-top: 20px;
        p {
          color: #fa3649;
          font-size: 24px;
          line-height: 35px;
        }
        &-inner {
          width: 590px;
          margin: 0 auto;
          padding-top: 140px;
        }
      }
    }
    &-btn {
      margin-top: 36px;
      text-align: center;
      img {
        width: 347px;
        height: 81px;
      }
    }
  }
</style>
